<template>
  <el-card style="border-radius: 12px">
    <el-form ref="form" label-width="100px">
      <el-form-item label="会议室：" size="mini" prop="name">
        <el-select
          placeholder="请选择会议室"
          value-key="id"
          v-model="RoomData"
          filterable
        >
          <el-option
            v-for="room in AllRoomsListData"
            :key="room.id"
            :value="room"
            :label="room.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会议室状态：" size="mini">
        <el-tag type="danger" v-if="RoomData?.isEquipment === false">
          不可用
        </el-tag>
        <el-tag type="success" v-else-if="RoomData?.isEquipment === true">
          可用
        </el-tag>
        <el-tag type="info" v-else>状态未知</el-tag>
      </el-form-item>
      <el-form-item label="会议时间：" size="default" prop="meetingTime">
        <el-date-picker
          v-model="meetingTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm"
          :disabledDate="disabledDate"
        />
      </el-form-item>
      <el-form-item label="会议主题：" prop="meetingTheme">
        <el-input
          type="textarea"
          placeholder="请输入会议主题，不超过15个字符。"
          v-model="title"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addBook">提交申请</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from 'vue'
import { reqRoomData } from '@/api/room/information'
import type {
  AllRooms,
  Rooms,
  RoomInformation,
} from '@/api/room/information/type'
import type { bookMeeting, ResponseData } from '@/api/meeting/type'
import { reqAddBookMeetingData } from '@/api/meeting'
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
onMounted(() => {
  getAllRoomsList()
})

let RoomData = ref<RoomInformation | null>()
let roomNumber = ref<string | any>()
let title = ref<string | any>()
// 填写的会议开始结束时间
let meetingTime = ref<string | any>()
// 下拉列表
let AllRoomsListData = ref<Rooms>([])
const getAllRoomsList = async () => {
  let result: AllRooms = await reqRoomData()
  if (result.code == 200) {
    AllRoomsListData.value = result.data
  }
}

const addBook = async () => {
  roomNumber.value = RoomData.value?.roomNumber
  let addBook = {
    roomNumber: roomNumber.value,
    jobNumber: userStore.jobNumber,
    userName: userStore.userName,
    startTime: meetingTime.value[0],
    endTime: meetingTime.value[1],
    title: title.value,
  }
  let result: ResponseData = await reqAddBookMeetingData(addBook)
  console.log(result)

  if (result.code == 200) {
    ElNotification({
      type: 'success',
      message: '预约申请成功',
    })
    RoomData.value = null
    meetingTime.value = ''
    title.value = ''
  } else {
    ElNotification({
      type: 'error',
      message: result.message,
    })
  }
}
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7 //如果没有后面的-8.64e7就是不可以选择今天的
}

const validatorTime = (rule: any, value: any, callback: any) => {
  if (value[0]) {
    callback()
  } else {
    callback(new Error('时间不能为空'))
  }
}
const rules = {
  meetingTime: [
    {
      required: true,
      trigger: 'blur',
      message: '请选择会议时间',
      validator: validatorTime,
    },
  ],
}
</script>

<style scoped lang="scss">
.tag {
  display: inline-block;
}

.el-form {
  width: 500px;
  margin: 25px auto;
}
</style>
